<template>
	<view class="imgs">
		<view class="img-item" v-for="(item,index) in list" :key="index">
			<image :src="item.path||item.src" mode="heightFix" class="img" @click="preView(item)"></image>
			<i class="iconfont icon-refuse" @click.stop="remove(item,index)" v-if="!readonly" />
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { confirm, msg } from '/utils/utils.js'
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		readonly: {
			type: Boolean,
			default: () => false
		}
	})

	const preView = (item) => {
		uni.previewImage({
			urls: [item.path || item.src]
		})
	}
	
	const remove = (item, index) => {
		confirm(`请确认删除 [ ${item.name || item.fname} ] ！`).then(() => {
			if (item.id) {
				coreApis.fileDelete({ Id: item.id }).then(res => {
					if (res) {
						msg('删除成功！')
						props.list.splice(index, 1)
					}
				})
			} else {
				props.list.splice(index, 1)
			}
		}).catch(() => {})
	}
</script>

<style lang="scss" scoped>
	.imgs {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 30rpx;

		.img-item {
			position: relative;

			.img {
				height: 100rpx;
				margin-right: 30rpx;
				margin-top: 30rpx;
			}

			.iconfont {
				position: absolute;
				right: 10rpx;
				top: 20rpx;
			}
		}
	}
</style>